<template lang="pug">
.view.cp-product-man-limit.fix-flex-pos
  .list-detail-wrap
    ProductList(@change="changeProduct")
    ProductDetail(
      :detail="prodcutDetail",
      :loading="detailLoading",
      style="margin-top: 12px")
  .struct-wrap
    el-card.card(v-loading="cardLoading")
      .card-header(slot="header")
        span 状态冻结/解冻
        i.btn.el-icon-edit(type="text", @click="editLimit", v-show="!cardEditing")
      .card-body
        .mask(v-show="!cardEditing", @click="showAlert")
        ul.level-one-wrap
          li.level-one
            strong 需求
            .level-two
              p.level-line
                span.control-title 是否启动流程控制
                el-radio(v-model="needStruct.control", :label="0") 冻结
                el-radio(v-model="needStruct.control", :label="1") 解冻
            .level-table
              el-table(:data="needStruct.list", size="mini", :border="true")
                el-table-column(align="center", type="index", label="序号", :fixed="true")
                el-table-column(align="center", prop="needLevel", label="需求层级")
                el-table-column(align="center", prop="tags", label="标签")
                el-table-column(align="center", prop="module", label="所属模块")
                el-table-column(align="center", prop="createUser", label="创建者")
                el-table-column(align="center", prop="reviewUser", label="评审者")
                el-table-column(align="center", prop="releaseUser", label="发布者")
                el-table-column(align="center", prop="editLimit", label="编辑权限")
                el-table-column(align="center", prop="viewLimit", label="查看权限")
          li.level-one
            strong 测试
            .level-two
              p.level-line
                span.control-title 是否启动流程控制
                el-radio(v-model="testStruct.control", :label="0") 冻结
                el-radio(v-model="testStruct.control", :label="1") 解冻
            .level-table
              el-table(:data="testStruct.list", size="mini", :border="true")
                el-table-column(align="center", type="index", label="序号", :fixed="true")
                el-table-column(align="center", prop="testLevel", label="测试层级")
                el-table-column(align="center", prop="tags", label="标签")
                el-table-column(align="center", prop="module", label="所属模块")
                el-table-column(align="center", prop="createUser", label="创建者")
                el-table-column(align="center", prop="reviewUser", label="评审者")
                el-table-column(align="center", prop="releaseUser", label="发布者")
                el-table-column(align="center", prop="actionUser", label="执行者")
                el-table-column(align="center", prop="editLimit", label="编辑权限")
                el-table-column(align="center", prop="viewLimit", label="查看权限")
          li.level-one
            strong 风险
            .level-two
              p.level-line
                span.control-title 是否启动流程控制
                el-radio(v-model="riskStruct.control", :label="0") 冻结
                el-radio(v-model="riskStruct.control", :label="1") 解冻
            .level-table
              el-table(:data="riskStruct.list", size="mini", :border="true")
                el-table-column(align="center", type="index", label="序号", :fixed="true")
                el-table-column(align="center", prop="createUser", label="创建者")
                el-table-column(align="center", prop="reviewUser", label="评审者")
                el-table-column(align="center", prop="releaseUser", label="发布者")
                el-table-column(align="center", prop="editLimit", label="编辑权限")
                el-table-column(align="center", prop="viewLimit", label="查看权限")
          li.level-one
            strong 缺陷
            .level-two
              p.level-line
                span.control-title 是否启动流程控制
                el-radio(v-model="defectStruct.control", :label="0") 冻结
                el-radio(v-model="defectStruct.control", :label="1") 解冻
              p.level-line
                span.control-title 变更控制委员会(BBC)管理缺陷
                el-radio(v-model="defectStruct.ccbSwitch", :label="0") 冻结
                el-radio(v-model="defectStruct.ccbSwitch", :label="1") 解冻
                label CCB 负责人
                el-select(v-model="defectStruct.ccbCharge", placeholder="请选择", style="width: 120px")
                  el-option(
                    v-for="item in empSelect",
                    :key="item.value",
                    :label="item.name",
                    :value="item.value")
        .button-wrap(v-show="cardEditing")
          el-button(type="primary", @click="submitLimit") 确定
          el-button.btn-after(@click="cancelLimit") 取消
</template>

<script>
import { mapGetters } from 'vuex';
import ProductData from '@/data/product';
import ProductList from '@/components/manage/product/ProductList';
import ProductDetail from '@/components/manage/product/ProductDetail';

export default {
  name: 'prolimit',
  components: {
    ProductList,
    ProductDetail
  },
  data() {
    return {
      prodcutDetail: [],
      detailLoading: true,
      //
      cardLoading: true,
      cardEditing: false,
      needStruct: { list: [] },
      testStruct: { list: [] },
      riskStruct: { list: [] },
      defectStruct: {}
    };
  },
  computed: {
    ...mapGetters(['empSelect'])
  },
  methods: {
    changeProduct (productId) {
      this.highLghtId = productId;
      this.detailLoading = true;
      this.cardLoading = true;
      setTimeout(() => {
        this.prodcutDetail = ProductData.productDetail;
        this.detailLoading = false;
        this.needStruct = ProductData.productLimit.need;
        this.testStruct = ProductData.productLimit.test;
        this.riskStruct = ProductData.productLimit.risk;
        this.defectStruct = ProductData.productLimit.defect;
        this.cardLoading = false;
      }, 1000);
    },
    deepCopy (arr) {
      return JSON.parse(JSON.stringify(arr));
    },
    editLimit () {
      this.cardEditing = true;
    },
    submitLimit () {
      this.cardEditing = false;
    },
    cancelLimit () {
      this.cardEditing = false;
    },
    showAlert () {
      this.$message.info('请点击右上角Icon，开启编辑状态');
    }
  },
  beforeRouteEnter (to, from, next) {
    next();
  },
  created () {
  },
  mounted () {}
};
</script>

<style lang="sass">
@import "../../../../styles/utils"
$ROLEWIDTH: 320px
$PADDINGWIDTH: 16px
$TABHEIGHT: 40px
.cp-product-man-limit
  .list-detail-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $PADDINGWIDTH
    width: $ROLEWIDTH
    // border: 1px solid gray
    overflow-x: hidden
    overflow-y: auto
  .struct-wrap
    position: absolute
    top: $PADDINGWIDTH
    bottom: $PADDINGWIDTH
    left: $ROLEWIDTH + 32px
    right: $PADDINGWIDTH
    background: white
    overflow-x: hidden
    overflow-y: auto
    .card
      position: relative
      min-height: 100%
    .el-card
      box-shadow: none
    .el-card__header
      padding: 12px 20px
      background-color: #F2F2F2
    .card-header
      text-align: center
      position: relative
      .btn
        position: absolute
        right: 0
        top: 50%
        font-size: 20px
        margin-top: -10px
        cursor: pointer
        &:hover
          color: #5D9BFB
    .card-body
      position: relative
      .mask
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        background-color: transparent
        z-index: 99
      .level-one-wrap
        .level-one
          margin-bottom: 16px
        strong
          font-size: 15px
          font-weight: 400
      .level-two
        padding-left: 32px
        font-size: 14px
        .level-line
          margin-top: 4px
        .control-title
          margin-right: 16px
        label
          margin-left: 16px
          margin-right: 8px
      .level-table
        padding-left: 32px
        margin-top: 8px
        width: 100%
        table
          width: 100%!important
          &::before
            display: none
          .icon-act
            font-size: 16px
            margin-left: 3px
            margin-right: 3px
        .el-table__empty-block
          display: none
    .button-wrap
      text-align: center
      .btn-after
        margin-left: 40px
</style>
